<script setup></script>

<template>
  <main class="relative">
    <!-- header -->
    <header class="flex justify-between items-center px-4 py-8 w-full z-10">
      <a href="/">
        <img src="./assets/header-logo.svg" alt="logo" class="w-[129px] h-[29px] m-0" />
      </a>
      <ul class="flex justify-between items-center gap-16 max-lg:hidden">
        <li>
          <a class="font-montserrat leading-normal text-lg text-gray-300">Home</a>
        </li>
        <li>
          <a class="font-montserrat leading-normal text-lg text-gray-300">About Us</a>
        </li>
        <li>
          <a class="font-montserrat leading-normal text-lg text-gray-300">Products</a>
        </li>
        <li>
          <a class="font-montserrat leading-normal text-lg text-gray-300">Contact Us</a>
        </li>
      </ul>
      <div
        class="flex justify-between items-center gap-2 font-medium wide:mr-24 max-lg:hidden"
      >
        <a href="/">Sign in</a>
        <span>/</span>
        <a href="/">Explore now</a>
      </div>
      <div>
        <a href="/" class="max-lg:block hidden"
          ><img src="./assets/hamburger.svg" alt="" width="25" height="25"
        /></a>
      </div>
    </header>
    <!-- home -->
    <section>home</section>
    <!-- popular product -->
    <section>popular product</section>
    <!-- super quality -->
    <section>super quality</section>
    <!-- special offer -->
    <section>special offer</section>
    <!-- customers -->
    <section>customers</section>
    <!-- updates -->
    <section>updates</section>
    <!-- footer -->
    <footer>footer</footer>
  </main>
</template>
<style scoped></style>
